<template>
  <div class="root" :style="{ height: appHeight + 'px'}"  @contextmenu.prevent="aboutContextmenu">
    <eagle-slideshow :repeat="true" :onStartExit="start" :onEndExit="exit" :backBySlide="false"></eagle-slideshow>
  </div>
</template>

<script>
import EagleSlideshow from '@/components/EagleSlideshow.vue'

export default {
  components: {
    EagleSlideshow
  },
  methods: {
    start () {
      this.$message({
          message: '请按→键开始播放'
        })
    },
    exit () {
      alert('播放结束')
    },
    aboutContextmenu () {
      this.$contextmenu({
        items: [
          {
            label: '退出播放',
            icon: 'el-icon-back',
            divided: true,
            onClick: () => {
              this.$router.push('/')
            }
          },
          {
            label: '浏览模式',
            icon: 'el-icon-reading',
            divided: true,
            onClick: () => {
              this.$router.push('/browse')
            }
          }
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 300,
        minWidth: 80
      })
      return false
    }
  },
  computed: {
    appHeight () {
      return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    },
    sortLayout () {
      return JSON.parse(JSON.stringify(this.$store.getters.sortLayout))
    },
    getBackground () {
      return this.$store.getters.getBackground
    },
    slideRowHeight () {
      return window.innerHeight / 18
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
    .root {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .eg-slideshow {
      background: transparent
    }
    .eg-slideshow /deep/ .eg-slide-content {
      width:100%;
      height:100%;
      top:50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%,-50%);
    }
    .gridlayout {
      width:100%;
      height:100%;
    }
</style>
